<template>
  <div class="home">
    <button @click="stop">暂停</button>
    <button @click="start">开始</button>
    <button>线条颜色<colorPicker v-model="color" /></button>
    <button @click="speed">加速</button>
    <my-map
      :minZoom="15"
      :maxZoom="19"
      projection="EPSG:3857"
      :adapter="adapter"
      :zoom="15"
      :center="center"
      :extent="extent"
      :doubleClickZoom="false"
    >
      <my-map-popup :position="finalPoint" title="标题">
        {{ "终点" }}
      </my-map-popup>
      <my-map-popup :position="startPoint" title="标题">
        {{ "起点" }}
      </my-map-popup>
      <my-map-popup :position="popupCoordinates" title="标题">
        {{ rota == 1 ? "运动已完成" : "正在运动" }}
      </my-map-popup>
      <my-map-track
        :loop="false"
        :pause="flag"
        :coordinates="coordinates"
        :period="period"
        :effect="effect"
        :color="color"
        :bezier="true"
        :arrow="true"
        @move="handleMove"
        @finish="finish"
      ></my-map-track>
    </my-map>
  </div>
</template>

<script>
import car from "$ui/map/sources/arrows/car.png";
import { MyMap, MyMapTrack, MyMapPopup } from "$ui/map";
import gisApi from '../../gisApi'
export default {
  data() {
    return {
      adapter({ TileLayer, XYZ }) {
        return new TileLayer({
          source: new XYZ({
            url: gisApi.layerConfig.tileUrl,
          }),
        });
      },
      data: null,
      period: 5,
      flag: false,
      selectFlag: false,
      color: "skyblue",
        extent: gisApi.mapConfig.extent,
      center: gisApi.mapConfig.center,
      coordinate: null,
      fillColor: "red",
      rota: 0,
      startPoint: [12729061.664567024, 3568670.000910808],
      finalPoint: [12726932.89312517, 3566422.7522427756],
      coordinates: [
        [12729061.664567024, 3568670.000910808],
        [12729008.158588907, 3568551.5234950976],
        [12728958.474403888, 3568444.5116846566],
        [12728908.790510453, 3568322.212410242],
        [12728836.175275264, 3568173.160219665],
        [12728771.203626271, 3568043.2171403673],
        [12728702.410475766, 3567913.274352654],
        [12728645.082704552, 3567783.331346252],
        [12728591.576726435, 3567668.6758038243],
        [12728522.783284346, 3567550.198468299],
        [12728476.921184007, 3567416.4336688],
        [12728419.593412794, 3567286.4906623987],
        [12728163.52930972, 3566300.452968361],
        [12728045.051974194, 3566300.452968361],
        [12727869.246867456, 3566323.3841643217],
        [12727693.441702401, 3566369.2464104514],
        [12727502.349073369, 3566407.464924594],
        [12727345.653223703, 3566411.286717691],
        [12727143.095098747, 3566407.464924594],
        [12726932.89312517, 3566422.7522427756],
      ],
      lineCoordinates: [],
      effect: car,
      popupCoordinates: [],
    };
  },
  methods: {
    speed() {
      if (this.period == 1) {
        alert("已经最快了");
        return;
      }
      this.period--;
    },
    stop() {
      this.flag = true;
    },
    start() {
      this.flag = false;
    },
    handleMove(coordinate) {
      this.popupCoordinates = coordinate;
      this.lineCoordinates.push(coordinate);
      this.coordinate = coordinate;
    },  
    finish() {
      this.rota = 1;
    },
  },
  created() {},
  mounted() {},
  components: {
    MyMap,
    MyMapTrack,
    MyMapPopup,
  },
};
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  .my-map {
    width: 100%;
    height: 100% !important;
  }
  .my-map-popup{
    min-width: 80px;
    margin-bottom: 20px;
  }
}
</style>
